import * as echarts from 'echarts'
import { size } from 'lodash'

export default function barChart(data: any) {
  const propsData = []
  propsData.push({
    value: data.ybjjs,
    name: '已办结案件数',
  })

  propsData.push({
    value: data.aqgdjs,
    name: '按期归档案件数',
  })

  propsData.push({
    value: data.cqgdjs,
    name: '超期归档案件数',
  })

  propsData.push({
    value: data.wgdjs,
    name: '未归档案件数',
  })
  const options = {
    grid: {
      top: '10%',
      left: '0%',
      right: '0%',
      bottom: '0%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(3,50,86,0.8)',
      textStyle: {
        fontSize: 16,
        color: '#ffffff',
      },
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(171,170,170,0.2)',
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#4f5e7bb3',
          fontSize: 16,
          // margin: 20,
        },
        axisTick: {
          show: false,
        },
        data: propsData.map((item) => item.name),
      },
      {
        type: 'category',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        data: propsData,
      },
    ],
    yAxis: {
      type: 'value',
      // name: '单位：人',
      // nameLocation: 'end',
      // nameTextStyle: {
      //   fontSize: 14,
      //   color: '#a6e4ff',
      //   align: 'right',
      // },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(171,170,170,0.2)',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(171,170,170,0.2)',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        color: '#666666',
        opacity: 0.6,
        fontSize: 14,
      },
    },
    series: [
      {
        // name: '数量',
        name: '',
        type: 'bar',
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#55adff',
              },
              {
                offset: 1,
                color: '#5dc8ff',
              },
            ]),
            // barBorderRadius: 50,
            borderWidth: 0,
          },
          emphasis: {
            shadowBlur: 15,
            shadowColor: 'rgba(105,123, 214, 0.7)',
          },
        },
        zlevel: 2,
        barWidth: '25%',
        data: propsData,
        label: {
          show: true,
          position: 'top',
          color: '#4f5e7b', //柱状顶部文字颜色
          distance: 10,
          fontSize: 16,
          offset: [0, 2],
        },
      },
      {
        name: '',
        type: 'bar',
        xAxisIndex: 1,
        zlevel: 1,
        itemStyle: {
          normal: {
            color: '#f3f7ff',
            borderWidth: 0,
            shadowBlur: {
              shadowColor: 'rgba(255,255,255,0.31)',
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 2,
            },
          },
        },
        barWidth: '25%',
        data: propsData,
      },
    ],
  }
  return options
}
